<template>
  <div class="basic-info-manage">
    <div class="edu-page-title">
      <span v-for="(item, index) in topNavItems" :class="{active: item.active}" :key="index" class="border-right" @click="clickItem(item)" >{{ item.label }}</span>
    </div>
    <template v-if="focusIndex === 0">
      <teachingBuildingInfo/>
    </template>
    <template v-if="focusIndex == 1">
      <classroomInfo/>
    </template>
  </div>
</template>

<script>
import classroomInfo from "./classroomInfo";
import teachingBuildingInfo from "./teachingBuildingInfo";
export default {
  name: "basicInfoManage",
  components: { classroomInfo, teachingBuildingInfo },
  data() {
    return {
      topNavItems: [
        {
          label: "教学楼信息",
          index: 0,
          active: true
        },
        {
          label: "教室基本信息",
          index: 1,
          active: false
        }
      ],
      focusIndex: 0
    };
  },
  methods: {
    // 切换教室基本信息和教学楼方法
    clickItem(item) {
      this.topNavItems.forEach(nav => {
        nav.active = false;
      });
      item.active = true;
      this.focusIndex = item.index;
    }
  },
  created() {}
};
</script>

<style lang="scss" scoped>
.basic-info-manage {
  .edu-page-title {
    overflow: hidden;
    height: auto;
    font-size: 18px;
    color: #2b3b4e;
    font-weight: bold;
    margin-bottom: 6px;
    span {
      cursor: pointer;
      display: inline-block;
      padding-right: 10px;
    }
    span.active {
      color: #2876c2;
    }
    span.border-right {
      margin-right: 10px;
    }
  }
}
</style>
